<template>
    <div class="multiDimensional-content-v">
        <table border="1" style="border-color:#38f;width: 100%;">
            <tr>
                <td rowspan="3" style="vertical-align: top;width: 120px;text-align: center;">
                    <span class="title-sm">选择审评专家</span>
                    <a-spin tip="正在加载中..." :spinning="zjSpinning">
                        <div style="height: calc(100vh - 168px);overflow: auto;">
                            <div style="width: 85px;text-align: left;margin-left: 7px;">
                                <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange"><span style="padding-left: 3px;color: #38f;font-weight: 600;">全选</span></a-checkbox>
                            </div>
                            <a-checkbox-group @change="$event=>{onChange($event,'ids')}" v-model="fromState.ids">
                                <div v-for="(item,index) in spzjList" :key="index" style="width: 85px;text-align: left;">
                                    <a-checkbox  :value="item.id" >
                                        {{ item.realname }}
                                    </a-checkbox>
                                </div>
                            </a-checkbox-group>
                        </div>
                    </a-spin>
                </td>
                <td style="height: 40px;">
                    <span class="title-sm">统计维度：</span>
                    <a-checkbox-group @change="$event=>{onChange($event,'tjwd')}" v-model="fromState.tjwd">
                        <a-checkbox  value="fsqfl" >申请分类</a-checkbox>
                        <a-checkbox  value="fzcfl" >注册分类</a-checkbox>
                        <a-checkbox  value="fqwfl" >勤务分类</a-checkbox>
                    </a-checkbox-group>
                </td>
                <td rowspan="2">
                    <a-button class="green-btn" @click="initialConditionsClick()" icon="undo">初始化搜索条件</a-button>
                </td>
            </tr>
            <tr>
                <td style="height: 40px;">
                    <span class="title-sm">统计口径：</span>
                    <a-checkbox-group @change="$event=>{onChange($event,'tjkj')}" v-model="fromState.tjkj">
                        <a-checkbox  value="hjs" >合计数</a-checkbox>
                        <a-checkbox  value="tgs" >通过数</a-checkbox>
                        <a-checkbox  value="btgs" >不通过数</a-checkbox>
                    </a-checkbox-group>
                </td>
            </tr>
            <tr>
                <td style="vertical-align: top;" colspan="2">
                    <a-spin tip="正在加载中..." :spinning="listSpinning">
                        <div style="height: calc(100vh - 222px);overflow: auto;">
                            <table v-if="dataList.length" class="result-table-v" border="1" style="border-color:#d9d9d9;width: 100%;">
                                <tr style="background-color: #dee5ed !important;">
                                    <th v-for="(item,index) in dataList[0]" :key="index" :style="{width:index == 0?'80px':'auto',textAlign:index == 0?'center':'left'}" >{{ item }}</th>
                                </tr>
                                <tr v-for="(item,index) in dataList" :key="index" v-if="index" :style="{backgroundColor: index % 2 !== 0?'':'#dee5ed'}">
                                    <td v-for="(trem,tIndex) in item" :key="tIndex" :style="{textAlign:tIndex == 0?'center':'left'}">{{ trem }}</td>
                                </tr>
                            </table>
                            <div v-else style="text-align: center;margin-top: 20px;" >
                                <a-empty />
                            </div>
                        </div>
                    </a-spin>
                </td>
            </tr>
        </table>
    </div>
</template>
<script>
import {
    spcyStattySpzjlb,
    spcyStattydwdTj,
} from './service/index'
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            dataList:[],
            fromState:{
                ids:[],//专家人员id,
                tjwd:['fsqfl'],//统计维度
                tjkj:[],//统计口经
            },
            spzjList:[],
            indeterminate:false,
            checkAll:false,
            zjIds:[],
            listSpinning:false,
            zjSpinning:false,
        }
    },
    watch:{

    },
    created(){
        this.getData()
    },
    methods:{
        async getData(){
            this.zjSpinning = true
            await spcyStattySpzjlb().then(res=>{
                if(res.code == 200){
                    //console.log('获得什么列表',res)
                    this.spzjList = res.result
                    this.zjIds = res.result.map((item,index)=>{return item.id})
                }else{
                    this.spzjList = []
                }
                this.zjSpinning = false
            })
            await this.getList()
        },
        getList(){
            this.listSpinning = true
            let data = {
                ids:this.fromState.ids.length?this.fromState.ids.join(','):'',
                tjwd:this.fromState.tjwd.length?this.fromState.tjwd.join(','):'',
                tjkj:this.fromState.tjkj.length?this.fromState.tjkj.join(','):'',
            }
            spcyStattydwdTj(data).then(res=>{
                if(res.code == 200){
                    this.dataList = res.result
                }else{
                    this.dataList = []
                    this.$message.warning(res.message)
                }
                this.listSpinning = false
            })
            
        },
        onCheckAllChange(e){//全选
            let obj = this.fromState
            Object.assign(this, {
                fromState:{
                    ...obj,
                    ids:e.target.checked ? JSON.parse(JSON.stringify(this.zjIds)):[]
                },
                indeterminate: false,
                checkAll: e.target.checked,
            });
            this.getList()
        },
        onChange(val,key){
            //console.log(val)
            if(key == 'ids'){
                this.indeterminate = !!this.fromState.ids.length && this.fromState.ids.length < this.zjIds.length;
                this.checkAll = this.fromState.ids.length === this.zjIds.length;
            }
            this.getList()
        },
        initialConditionsClick(){//初始化搜索条件
            var that = this
            this.$confirm({
                title:'您确认要初始化搜索条件吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    that.fromState = {
                        ids:[],//专家人员id,
                        tjwd:['fsqfl'],//统计维度
                        tjkj:[],//统计口经
                    }
                    that.indeterminate = false
                    that.checkAll = false
                    that.getList()
                }
            })
        }
    }
}
</script>
<style lang="less">
.multiDimensional-content-v{
    padding: 10px;
    th,td{
        padding: 5px 10px; 
    }
    .title-sm{
        font-weight: 600;
        font-size: 16px;
    }
    .result-table-v{
        th,td{
            text-align: center;
        }
    }
}
</style>